<template>
  <div class="hisotry-item row">
    <div class="preview">
      <q-img
        class="image"
        :ratio="16 / 9"
        width="100%"
        height="100%"
        :src="video.coverImage"
        @click="gotoVideo()"
      >
        <template v-slot:error>
          <div class="absolute-full flex flex-center bg-negative text-white">
            Cannot load image
          </div>
        </template>
      </q-img>
      <q-btn
        class="bookmark-btn"
        size="10px"
        :icon="video.isPinned ? 'mdi-pin-off' : 'mdi-pin'"
        color="primary"
        dense
        @click="pin"
      ></q-btn>
      <div class="creator-name q-px-xs">{{ video.creatorName }}</div>
      <div class="duration-label q-px-xs">{{ video.durationLabel }}</div>
    </div>
    <div class="info column q-pa-sm q-ml-sm" @click="emit('detail', $event)">
      <div class="title one-line-text">{{ video.title }}</div>
      <div class="video-details row items-center q-my-xs">
        <q-icon name="mdi-podium label"></q-icon>
        <div class="label">482</div>
        <q-icon class="q-ml-sm label" name="mdi-eye"></q-icon>
        <div class="q-mr-sm label">2K</div>
        <q-icon name="img:/icons/video-info-record.svg" />
        <div class="label">24</div>
      </div>
      <div class="description">{{ video.description }}</div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import Video from 'src/models/Video';
import { useRouter } from 'vue-router';
const router = useRouter();
const props = defineProps({
  video: {
    type: Video,
    required: true,
  },
});
const emit = defineEmits(['detail']);
function gotoVideo(langId = '') {
  if (props) {
    void router.push({
      name: 'Video',
      params: {
        id: props.video.id,
      },
    });
  }
}
function pin() {
  if (props.video.isPinned) {
    console.log('remove from pin');
  } else {
    console.log('add to pin');
  }
}
</script>
<style lang="scss" scoped>
.hisotry-item {
  width: 100%;
  height: 136px;
  background-color: $primary-panel;
  .preview {
    width: 236px;
    height: 136px;
    position: relative;
    .bookmark-btn {
      position: absolute;
      top: 4px;
      right: 4px;
    }
    .creator-name {
      position: absolute;
      bottom: 4px;
      left: 4px;
      font-size: 12px;
      background-color: $primary-panel;
      border-radius: 3px;
      cursor: default;
    }
    .duration-label {
      bottom: 4px;
      right: 4px;
      position: absolute;
      font-size: 12px;
      background-color: $primary-panel;
      border-radius: 3px;
      cursor: default;
    }
  }
  .info {
    .title {
      font-size: 14px;
      font-weight: bold;
      max-width: 200px;
    }
    .video-details {
      cursor: default;
      .label {
        color: $sub;
        font-size: 12px;
      }
    }
    .description {
      width: 200px;
      height: 55px;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      font-size: 12px;
      color: #808080;
    }
  }
}
</style>
